<style lang="scss">
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    border-bottom: 1px solid #dcdfe6;
    min-height: 36px;
}

.el-input__wrapper {
    margin-left: 12px;
}
</style>

<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="grid-content ep-bg-purple-dark">
                    <el-button type="primary" @click="sectionForm.ShowOrClose()">新增</el-button>
                    <el-input type="input" v-model="input" style="width: 240px" placeholder="搜索词"></el-input>
                    <el-button type="primary" @click="inteTable()">搜索</el-button>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column fixed prop=index label="序号" width="60" align="center" />
            <el-table-column prop="cno" label="课程号" width="150" align="center" />
            <el-table-column prop="cname" label="课程名称" width="120" align="left" />
            <el-table-column prop="classhour" label="课时" width="120" align="right" />
            <el-table-column prop="credit" label="学分" width="120" align="right" />
            <el-table-column fixed="right" label="操作" min-width="150" align="center">
                <template #default="scope">
                    <el-button size="small" @click="sectionForm.ShowOrClose(scope.row)">设置</el-button>
                    <el-button type="danger" size="small" @click="Delete(scope.row.cno)" disabled>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :total="total"
            :page-sizes="[2, 10, 15, 20, 30]" layout=" prev, pager, next, sizes, jumper"
            @update:currentPage="handleSizeChange" @update:pageSize="handleCurrentChange" />
        <CourseForm ref="sectionForm" @submit="updateTableData" />
    </div>
</template>

<script setup name="CourseView">
import { ref } from 'vue'
import request from '@/utils/request'
import pagination from '@/components/Pagination/index.vue'
import { onMounted } from 'vue';
import CourseForm from './CourseForm.vue'
const sectionForm = ref();
const input = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);

const inteTable = () => {
    request({
        url: 'api/Course?' + 'keyword=' + input.value + '&pageIndex=' + currentPage.value + '&pageSize=' + pageSize.value,
        method: 'get'
    }).then(res => {
        if (res.data != null) {
            request({
                url: 'api/Course/CourseCount?' + 'keyword=' + input.value,
                method: 'get'
            }).then(res => {
                total.value = res.data;
            })
            for (let i = 0; i < res.data.length; i++) {
                res.data[i].index = pageSize.value * (currentPage.value - 1) + i + 1;
            }
        } else {
            total.value = 1;
        }
        tableData.value = res.data;
    })
}
const Delete = (val) => {
    request({
        url: 'api/Course?' + 'cno=' + val,
        method: 'delete'
    }).then(res => {
        if (res.status == 200) {
            ElMessage({
                message: '删除成功！',
                type: 'warning',
            })
            inteTable();
        }
    })
}

const handleSizeChange = (newPage) => {
    currentPage.value = newPage;
    inteTable();
}
const handleCurrentChange = (newSize) => {
    pageSize.value = newSize;
    inteTable();
}
const updateTableData = () => {
    inteTable();
}

onMounted(() => {
    inteTable();
})
</script>